<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Flash/Strobe Media Playback</title>
        <style type="text/css">
            body {
                font: 12px Arial, sans-serif;
                background-color: #000000;
                color: #FFFFFF;
                height: 100%;
                width: 100%;
                margin: 0;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js">
        </script>
        <script type="text/javascript" src="jquery.strobemediaplayback.js">
        </script>
		<script type="text/javascript" src="lib/swfobject.js">
        </script>
		<link type="text/css" href="jquery.strobemediaplayback.css" rel="stylesheet" />
	   
		<script type="text/javascript">
            $(function(){  
			    
            	$.fn.adaptiveexperienceconfigurator.rules.push(
		            // is Firefox
		            function(context, options){
		                context.isFirefox = context.userAgent.match(/Firefox/i) != null;
		                if (context.isFirefox && options.useHTML5) {
		                    context.setOption(options, "src", "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg");
		                }
		                else {
		                    context.setOption(options, "src", "http://osmf.org/dev/videos/cathy2_HD.mp4");
		                }
		            });
			              
                var options={
					id: "smpVideo",
					src: "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4",
					//src: "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg",
					//src: "http://localhost/Psychology 02 - Responsive Brain.mpg",
					width: 480,
					height: 362,				
					poster: "images/poster.png",
					favorFlashOverHtml5Video: true
				};			
                
								
				// Using HTMLVideoElement directly
				//var $video = $(".videoElement");
				
				// Using StrobeMediaPlayback
			    var $video = $(".strobemediaplayback").strobemediaplayback(options);

				
				$video.bind("durationchange", onDurationChange);
				$video.bind("timeupdate", onTimeUpdate);
				
				$("#play-pause").bind("click", $video, onPlayPauseClick);
				$("#playlist a").bind("click", $video, onPlaylistItemClick);
            });
			
			function onDurationChange(event)
			{		
				$("#duration").html(this.duration);
			}
			
			function onTimeUpdate(event)
			{
				$("#currentTime").html(this.currentTime);
			}
			
			function onPlayPauseClick(event)
			{
				var video = event.data[0];
				if (video.paused)
				{
					video.play();
				}
				else 
				{
					video.pause();				
				}
			}
			
			function onPlaylistItemClick(event)
			{
				event.preventDefault();
				var video = event.data[0];
				video.src = this.href;
                video.load();
                video.play();                
			}
        </script>
    </head>
    <body>
    	<!--<video class="video-element" 
					src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg" 
					width="480"
					height="362" 				
					poster="images/poster.png">Alternative content</video> -->		  
					
        <div class="strobemediaplayback" 
				id="strobemediaplayback"
				data-smp-src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4"
				data-smp-width="480"
				data-smp-height="362"
				data-smp-poster="images/poster.png"
				data-smp-favorFlashOverHtml5Video="false">Alternative content</div>

		  
		<div>
			<div>
				<span id="currentTime" /> ... </span> : <span id="duration" /> ... </span>
			</div>   
			<a href="#" id="play-pause">Play/Pause</div>  
		</div>	
		<div id="playlist">	
			<a href="http://osmf.org/dev/videos/cathy1_SD.mp4">OSMF SD</a>
	        <br/>
	        <a href="http://osmf.org/dev/videos/cathy1_HD.mp4">OSMF HD</a>
	        <br/>
	        <a href="http://osmf.org/dev/videos/cathy2_SD.mp4">SMP SD</a>
	        <br/>
	        <a href="http://osmf.org/dev/videos/cathy2_HD.mp4">SMP HD</a>
	        <br/>
	        <a href="http://media.w3.org/2010/05/sintel/trailer.mp4">http://media.w3.org/2010/05/sintel/trailer.mp4</a>
	        <br/>
	        <a href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4</a>
	        <h3>OGG files, for Firefox HTML5 only</h3>
	        <a href="http://media.w3.org/2010/05/sintel/trailer.ogv">http://media.w3.org/2010/05/sintel/trailer.ogv</a>
	        <br/>
	        <a href="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg">http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg</a>
	        <br/>	
		</div>    
    </body>
</html>
